<template>
<div id="process-problem">
    <div class="process-problem">
        <div class="processit-title">
            <mt-header title="流程问题" class="mt-header">
                <mt-button icon="back" slot="left" class="back" @click="$root.goBack()">返回</mt-button>
            </mt-header>
        </div>
        <div class="replace"></div>
        <div class="process-container">
             <ul>
                 <li>
                    <p>流程所在领域</p>
                    <div class="button-sort">
                        <!-- <input type="text" placeholder="领域" class="process-area">
                        <button>
                        <img src="../assets/ic-checkbox.png" alt="" class="checkbox">
                        </button> -->
                                     <!-- 多选框 -->
                     <div class="multiple">
                      <multiselect v-model="area1" :options="options" :multiple="true" :close-on-select="false" :clear-on-select="false" :hide-selected="true" :preserve-search="true" placeholder="领域" label="name" track-by="key">
                        <template slot="tag" slot-scope="props"><span class="custom__tag"><span>{{ props.option.name }}</span><span class="custom__remove" @click="props.remove(props.option)">❌</span></span></template>
                      </multiselect>
                    </div>
                    </div>
                 </li>
                   <li>
                    <p>是否有电子流程</p>
                    <div class="button-sort">
                        <!-- 是or否 -->
                        <mt-button 
                            type="primary"
                            size="small" 
                            v-for="(item,index) in buttonInfo" :key="item.index" 
                            :type="index==indexs?'primary':'default'"
                            @click="toggleSelected(index)" 
                         >{{item.name}}</mt-button>
                        <!-- <mt-button type="primary" size="small" >是</mt-button>
                        <mt-button type="default" size="small" >否</mt-button> -->
                        <div class="e-process" v-if="isshow">
                            <span class="e-name">电子流程名称</span>
                             <input type="text" placeholder="可填写多个" class="process-area" v-model="processVo.processName">
                            <span class="e-system">电子流程所在系统</span>
                             <!-- <input type="text" placeholder="电子流程所在系统" class="process-area">
                            <button>
                                <img src="../assets/ic-checkbox.png" alt="" class="checkbox2">
                            </button> -->
                            <div class="multiple">
                              <multiselect v-model="system1" :options="options2" :multiple="true" :close-on-select="false" :clear-on-select="false" :hide-selected="true" :preserve-search="true" placeholder="电子流程所在系统" label="name" track-by="name">
                                <template slot="tag" slot-scope="props"><span class="custom__tag"><span>{{ props.option.language }}</span><span class="custom__remove" @click="props.remove(props.option)">❌</span></span></template>
                              </multiselect>
                            </div>
                        </div>
                    </div>
                 </li>
                <li>
                    <p>联系方式</p>
                    <div class="button-sort">
                        <input type="text" placeholder="默认本人手机" class="mobilenum" v-model="mobile">
                    </div>
                </li>
                   <li>
                    <p>问题描述</p>
                    <div class="button-sort ">
                       <textarea v-model="content" class="problemdes" placeholder="接受应用系统方面的问题手里。（代人保障请留保障本人姓名、工号、联系方式，谢谢！）"></textarea>
                        <a href="#" class="uploadImg" @click="getpicture">
                            <img src="../assets/ic-upload.png" alt="">
                            <span>上传图片</span>
                            <mypicture v-model="show" v-show="isshow" @on-feedback="feedback"></mypicture>
                        </a>
                        <div class="imgview">
                              <ul>
                                  <li v-for="(item,index) in imgList" :key="index">
                                    <img :src="item" alt="">
                                    <i @click="delImg(index)"></i>
                                  </li>
                              </ul>
                        </div>
                    </div>
                </li>
             </ul>
        </div>
       <!-- 提交 -->
      <footer class="btnsubmit" @click="addProcess">
          <button >提交</button>
      </footer>
    </div>
</div>
</template>

<script>
import { Navbar, TabItem, Button,MessageBox } from "mint-ui";
import Multiselect from "vue-multiselect";
import { mapGetters, mapActions } from "vuex";
import service from "../service";
import config from "configuration";
import mypicture from "../components/Picture/index";
export default {
  components: {
    Navbar,
    TabItem,
    Button,
    Multiselect,
    mypicture,
    MessageBox
  },
  name: "process-problem",
  data() {
    return {
      area1: "",
      system1: "",
      str1: "",
      str2: "",
      processVo: {
        area: "",
        processName: "",
        processSystem: ""
      },
      process: 1,
      content: "",
      mobile: "",
      workcode: "",
      fileUrl: "",
      show: false,
      isshow: false,
      imgList:[],
      imgurl: "",
      base64Code: "",
      indexs: 0,
      buttonInfo: [{ name: "是", index: 0 }, { name: "否", index: 1 }],
      isshow: true,
      //多选框
      options: [
        { name: "战略业务规划及Marketing(SBPM)", key: 1 },
        { name: "产品开发RND", key: 2 },
        { name: "客户关系管理(CRM)", key: 3 },
        { name: "采购Procurement(PROC)", key: 4 },
        { name: "供应链管理(SC)", key: 5 },
        { name: "物流管理(LOG)", key: 6 },
        { name: "财务管理(FIN)", key: 7 },
        { name: "人力资源管理(HR)", key: 8 },
        { name: "流程与IT管理(BP&IT)", key: 9 },
        { name: "审计管理(IA)", key: 10 },
        { name: "体系管理(MS)", key: 11 },
        { name: "综合管理(GAO)", key: 12 }
      ],
      options2: [
        { name: "CRM", language: "CRM" },
        { name: "RDM", language: "RDM" },
        { name: "PLM", language: "PLM" },
        { name: "PMS", language: "PMS" },
        { name: "OA", language: "OA" }
      ]
    };
  },
  mounted() {
    this.getUserInfo();
  },
  computed: {
    ...mapGetters({
      loading: "getLoading",
      direction: "getDirection"
    })
  },
  methods: {
    addProcess() {
      var arr1 = [];
      var arr2 = [];
      for (var i = 0; i < this.area1.length; i++) {
        var item = this.area1[i];
        arr1.push(item.key);
        this.str1 = arr1.join(";");
      }
      for (var i = 0; i < this.system1.length; i++) {
        var item = this.system1[i];
        arr2.push(item.name);
        this.str2 = arr2.join(";");
      }
      this.processVo.area = this.str1;
      this.processVo.processSystem = this.str2;
      if (this.content.length <= 0) {
        MessageBox({
          title: "提示",
          message: "请您输入问题描述！"
        });
        return;
      }

      var params = {};
      params.dept = 2;
      params.type = 1;
      params.content = this.content;
      params.userId = this.workcode;
      params.fileUrl = this.fileUrl;
      params.process = this.process;
      params.processVo = this.processVo;
      params.mobile = this.mobile;
      service.addPr(params).then(res => {
        if (res.code == 100) {
           setTimeout(() => {
             this.$router.push({name:'progressquery'})
           }, 1000);
        }
      });
    },
    // 拍照和本地上传
    feedback(imgObj) {
      // alert(imgObj.base64Code);
      this.isshow = false;
      // console.log(imgObj);
      this.base64Code = imgObj.base64Code;
      this.imgList.push(imgObj.base64Url)
      this.imgurl = imgObj.base64Url;
      var imageData = {
        data: this.imgurl,
        userId: this.workcode,
        group: "demon"
      };
      service.postUpload(imageData).then(res => {
        if (res.code == 100) {
          this.fileUrl = res.output.url;
        }
      });
    },
    getpicture() {
      this.show = true;
      this.isshow = true;
      // console.log(this.show)
    },
    getUserInfo() {
      service.getUser().then(data => {
        var params = {};
        params.workcode = this.workcode = data.employeenumber;
        service.getUserMobile(params).then(res => {
          this.mobile = res.data;
        });
      });
    },
    toggleSelected(index) {
      if (index == 0) {
        this.isshow = true;
        this.process = 1;
      }
      if (index == 1) {
        this.isshow = false;
        this.process = 2;
      }
      this.indexs = index;
    }
  }
};
</script>
<style scoped>
@import url("../../node_modules/vue-multiselect/dist/vue-multiselect.min.css");
</style>